<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<script src="<c:url value='/resources/js/jquery.dataTables.js'/>" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        /*event ketika selectTahun opsi nya dipilih.
        misal ketika tahun A terpilih, maka secara otomatis select periode hanya akan menampilkan periode
        dari tahun A saja.*/
        $("#selectTahun").change(function() {

            /*ambil idTahun dari selectTahun*/
            var idTahun = $("#selectTahun").attr("value");

            /*buat select periode hanya berisi opsi pilih*/
            $("select#periode").html("<option value=\"\">--pilih--</option>");

            /*jika idTahun null atau kosong, abaikan saja proses pencarian, biarkan select periode hanya beropsi pilih*/
            if (idTahun != null && idTahun.length > 0) {

                /*ambil data periode berdasarkan idTahun dengan JSON*/
                $.getJSON("/kab/periode/tahun/"+idTahun+".json", function(data) {

                    /*buat tag option baru untuk select periode yang berdasarkan idTahun*/
                    var options = "<option value=\"\">--pilih--</option>";
                    for (var i=0;i < data.length;i++){
                        var option = "<option value=\"" + data[i].id + "\">" + data[i].triwulan.triwulan + "</option>";
                        options = options.concat(option);
                    }

                    /*pasang tag options dari select periode yang baru*/
                    $("select#periode").html(options);
                });
            }
        });
    });
</script>

<div class="content">
    <c:url value="/sekolah/${sekolah.npsn}/statusLaporan" var="statusLaporan_url"/>

    <form:form action="${statusLaporan_url}" method="PUT" modelAttribute="statusLaporan">
        <form:hidden path="id" id="id"/>
        <div class="blocksection">
            <div class="blockcontent">
                <h3>Masukkan Perubahan Status Laporan
                    <a href="<c:url value='/sekolah/${sekolah.npsn}'/>">
                        <c:out value="${sekolah.nama}"/>
                    </a>
                </h3>
                <dl class="form-text">

                    <dt><label>Tahun :</label></dt>
                    <dd>
                        <select id="selectTahun" >
                            <option value="" selected="selected">--pilih--</option>
                            <c:forEach items="${tahunList}" var="tahunItem">
                                <c:choose>
                                    <c:when test="${tahunItem == statusLaporan.periode.tahun}">
                                        <option value="${tahunItem.id}" selected="selected">${tahunItem.tahun}</option>
                                    </c:when>
                                    <c:otherwise>
                                        <option value="${tahunItem.id}">${tahunItem.tahun}</option>
                                    </c:otherwise>
                                </c:choose>

                            </c:forEach>
                        </select>
                    </dd>

                    <dt>
                        <label for="periode">Periode : </label>
                    </dt>
                    <dd>
                        <form:select path="periode" id="periode">
                            <%--<form:option label="--pilih--" value=""/>--%>
                            <form:options items="${periodeList}" itemValue="id" itemLabel="triwulan.triwulan" />
                        </form:select>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="periode"/>
                    </dd>
                    <dt>
                        <label for="enumStatusLaporan">Status :</label>
                    </dt>
                    <dd>
                        <form:select path="enumStatusLaporan" id="enumStatusLaporan">
                            <%--<form:option label="--pilih--" value=""/>--%>
                            <c:forEach items="${enumStatusLaporanList}" var="eStatusLaporan">
                                <form:option value="${eStatusLaporan}" label="${eStatusLaporan}"/>
                            </c:forEach>
                        </form:select>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="periode"/>
                    </dd>
                    <dt>
                        <label for="keterangan">Keterangan :</label>
                    </dt>
                    <dd>
                        <form:textarea path="keterangan" id="keterangan"/>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="keterangan"/>
                        <p class="description">Masukkan Keterangan StatusLaporan</p>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="form-button">
            <div class="buttonWrapper">
                <a href="<c:url value='/sekolah/${sekolah.npsn}/statusLaporan'/>" class="back">Kembali</a>
            </div>
            <input type="submit" value="Simpan" name="submit_1" id="submit_1"/>
            <input class="grey" type="reset" value="Hapus" name="reset_1" id="reset_1"/>
        </div>
    </form:form>
</div>
